<template>
  <view class="hydropower-details">
    <view class="payment-box">
      <view class="payment-information">
        <h4 class="payment-title">消息通知</h4>
        <view class="payment-content">
          <view class="payment-icon"></view>
          <!-- #ifndef MP-WEIXIN -->
          <up-notice-bar
            bgColor="transparent"
            :text="text"
            :fontSize="14"
            speed="50"
            icon=""
          >
          </up-notice-bar>
          <!--  #endif -->
          <!-- #ifndef APP-PLUS || H5  -->
          <up-notice-bar
            bgColor="transparent"
            :text="text"
            :fontSize="px2Rpx(14)"
            speed="50"
            icon=""
          >
          </up-notice-bar>
          <!-- #endif  -->
        </view>
      </view>
      <view class="payment-form">
        <view class="coins-box">
          <view class="coins">
            <view class="coins-img"></view>
          </view>
        </view>
        <up-cell-group :border="false">
          <up-cell title="缴费户名" :value="orderDetail.payName"></up-cell>
          <up-cell title="租房订单号" :value="orderDetail.orderId"></up-cell>
          <up-cell title="房屋信息" :value="orderDetail.houseType"></up-cell>
          <up-cell
            title="期数"
            :value="orderDetail.paymentMethod + '月'"
          ></up-cell>
          <up-cell
            title="应缴费用"
            :value="orderDetail.allAmount + '元'"
          ></up-cell>
        </up-cell-group>
      </view>
      <view class="room-btn">
        <button class="btn" form-type="submit" @click="payPopupDisabled = true">
          立即缴费
        </button>
      </view>

      <view class="popup-pay">
        <up-popup
          :show="payPopupDisabled"
          closeOnClickOverlay
          @close="handlePayPopupClose"
        >
          <view class="popup-pay__title"> 收银台 </view>
          <view class="popup-pay__desc">
            <view class="popup-pay__desc-title">
              {{ orderDetail.smallHouseTypeName }}
            </view>
            <view class="popup-pay__desc-detail">
              <text class="popup-pay__desc-detail-label"> 应付金额 </text>
              <text class="popup-pay__desc-detail-value">
                ¥ {{ orderDetail.allAmount }}元
              </text>
            </view>
          </view>
          <up-cell-group :border="false">
            <up-cell v-for="(item, idx) in payWayList" :key="idx">
              <template #title>
                <view class="u-slot-title">
                  <image class="pay-way__img" :src="item.payWayPrefixIconUrl" />
                </view>
                <view class="pay-way__name">
                  <text class="pay-way__name-title">{{ item.payWayName }}</text>
                  <text class="pay-way__name-desc">{{ item.desc }}</text>
                </view>
              </template>
              <template #value>
                <image
                  v-if="item.isChecked"
                  class="pay-way__img is-checked"
                  :src="isCheckedImgUrl"
                />
                <image
                  v-else
                  class="pay-way__img"
                  :src="notCheckedImgUrl"
                  @tap="handleCheckedPayWay(item)"
                />
              </template>
            </up-cell>
          </up-cell-group>

          <view class="popup-pay__btn-group">
            <up-button
              class="btn__pay"
              shape="circle"
              :text="`立即支付¥ ${orderDetail.allAmount} 元`"
              :disabled="payWayList.every((way) => !way.isChecked)"
              color="linear-gradient(to right, #FF934C, #FC686F)"
              @tap="handlePayForWithWayBtnClick"
            />
            <up-button
              class="btn__later-pay"
              plain
              shape="circle"
              text="稍后支付"
              type="warning"
              iconColor="linear-gradient(to right, #FF934C, #FC686F)"
              @tap="handleLaterPayBtnClick"
            />
          </view>
        </up-popup>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  getCurrentPagesTotal,
  getUrlParamsInH5,
  getUrlParamsInWeixin,
} from "@/utils/utils";
import {
  getOrderDetailApi,
  userPayLeaseOrderApi,
  userCancelPayApi,
  userCancelPayLeaseOrderApi,
} from "@/package_property/pages/api/life-services.js";
import { px2Rpx } from "@/utils/utils";
import { ref, inject } from "vue";
import { customNav } from "@/utils/customNav";
import { onLoad } from "@dcloudio/uni-app";
const orderDetail = ref({});
const text = ref("尊敬的用户，请您尽快缴纳本期房租费用，谢谢！");
const payPopupDisabled = ref(false);
const imgUrlPrefix = inject("baseImgUrl");
const isCheckedImgUrl = `${imgUrlPrefix}2024-04-26/1714103545102组 4@2x.png`;
const notCheckedImgUrl = `${imgUrlPrefix}2024-04-26/1714103688260椭圆 586 拷贝@2x.png`;
const payWayList = ref([
  {
    payWayName: "微信支付",
    payWayPrefixIconUrl: `${imgUrlPrefix}2024-04-26/1714101755578weixin@2x.png`,
    desc: "亿万用户的选择，更快更安全",
    isChecked: false,
  },
  {
    payWayName: "对公账号",
    payWayPrefixIconUrl: `${imgUrlPrefix}2024-04-26/1714101841808gongduigongzhuanzhang@2x.png`,
    desc: "获取对公支付账号，支付成功后请上传凭证审核",
    isChecked: false,
  },
]);
const handlePayPopupClose = () => {
  payPopupDisabled.value = false;
};
const curOrderId = ref("");
const handlePayForWithWayBtnClick = () => {
  if (payWayList.value.every((way) => !way.isChecked)) return;
  const way = payWayList.value.find((way) => way.isChecked).payWayName;
  switch (way) {
    case "微信支付":
      let payType = "";
      // #ifndef MP-WEIXIN
      payType = "1";
      // #endif
      // #ifdef MP-WEIXIN
      payType = "0";
      // #endif
      getOrderPayData(payType);
      break;
    case "对公账号":
      const orderId = orderDetail.value.orderId;
      // customNav(
      //   `public-transfer?orderId=${orderId}&price=${
      //     orderDetail.value.allAmount
      //   }&payName=房屋订金`
      // );
      customNav(
        `public-transfer?information=${JSON.stringify(orderDetail.value)}`
      );
      break;
  }
};
const handleLaterPayBtnClick = () => {
  payPopupDisabled.value = false;
  payWayList.value.forEach((way) => {
    way.isChecked = false;
  });
};
const getOrderPayData = async () => {
  // #ifndef MP-WEIXIN
  orderDetail.value.payType = "1";
  // #endif
  // #ifdef MP-WEIXIN
  orderDetail.value.payType = "0";
  // #endif
  const params = orderDetail.value;
  const res = await userPayLeaseOrderApi(params);
  const { code, data } = res;
  if (code === 200) {
    // #ifndef MP-WEIXIN
    weChatAppPay(data);
    // #endif
    // #ifdef MP-WEIXIN
    toPay(data);
    // #endif
  }
};
const toPay = (payData) => {
  console.log("payData", payData);

  uni.requestPayment({
    provider: "wxpay",
    timeStamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.prepayId,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
      uni.showToast({
        title: "支付成功",
        duration: 2000,
        success: () => {
          payPopupDisabled.value = false;
          customNav(`list`);
        },
      });
    },
    fail: function (err) {
      userCancelPayLeaseOrderApi(curOrderId.value);
      console.log("fail:" + JSON.stringify(err));
    },
  });
};
const weChatAppPay = (payData) => {
  let params = {
    partnerId: payData.partnerId,
    prepayId: payData.prepayId,
    nonceStr: payData.nonceStr,
    timeStamp: payData.timeStamp,
    sign: payData.paySign,
  };
  window.mobile.jsCallPayWx(JSON.stringify(params));
};
const handleCheckedPayWay = (item) => {
  payWayList.value.forEach((way) => {
    way.isChecked = way.payWayName === item.payWayName;
  });
};
const getOrderDetailData = async () => {
  const res = await getOrderDetailApi(curOrderId.value);
  const { code, data } = res;
  if (code === 200) {
    console.log("getOrderDetailApi", data.records[0]);
    orderDetail.value = data.records[0];
  }
};
onLoad(() => {
  /* #ifdef MP-WEIXIN */
  curOrderId.value = getUrlParamsInWeixin()?.id;
  /* #endif */

  /* #ifndef MP-WEIXIN */
  curOrderId.value = getUrlParamsInH5()?.id;
  /* #endif */

  getOrderDetailData();
});
</script>


<style lang="less" scoped>
@import url(./style/hydropower-details.less);
</style>